<template>
	<view class="relative">
		<view class="cu-custom" :style="[{height:CustomBar + 40 + 'px'}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="flex justify-start">
					<view class="action" @tap="BackPage" v-if="isBack">
						<text class="iconfont icon-back"></text>
						<slot name="backText"></slot>
					</view>
					<view style="width: 200rpx;" class="padding-sm relative" v-else>
						<text class="iconfont icon-weizhi"></text>
						<text @tap="covertSp">{{currentLocation ? currentLocation : "位置"}}</text>
						<view v-if="showp" style="top: 95%;" :class="bgColor" class="absolute left0 padding-xs flex flex-direction w-100">
							<text @tap="toLocation" class="padding-top-sm padding-bottom-sm padding-left-xs">
								<text class="iconfont icon-qiehuanchengshi"></text>
								<text>{{currentLocation ? currentLocation : "选择城市"}}</text>
							</text>
							<text @tap="locate" class="padding-top-sm padding-bottom-sm padding-left-xs">
								<text class="iconfont icon-miaozhun"></text>
								<text>定位</text>
							</text>
							<!-- <text @tap="changeRole" class="padding-top-sm padding-bottom-sm padding-left-xs">
								<text class="iconfont icon-paidui1"></text>
								<text>切换角色</text>
							</text> -->
						</view>
					</view>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				
			</view>
			<view class="con-us-container " :class="bgColor" :style="[{top:CustomBar - 1 + 'px'}]">
				<view @tap="openKf" class="flex align-center justify-start">
					<text class="text-sm">在线客服</text>
					<text  class="iconfont icon-lianxiwomen "></text>
				</view>
				
				<view @tap="callKefu" class="flex align-baseline justify-start">
					<text class="text-sm">客服电话</text>
					<text  class="text-sm ">400-1033-801</text>
				</view>
			</view>
		</view>
		<view 
			v-if="changeRoleFlg"
			@tap="closeRole"
			class="flex flex-direction justify-center align-center fixed top0 left0"
			style="height: 100vh; width: 100vw; background-color: rgba(255,255,255, 0.8); z-index: 99999;">
			<view class="w-100">
				<view class="flex justify-center align-center">
					<view @tap="toApp('wx80b49238c530044b')">
						<text style="font-size: 3rem;" class="text-blue">
							<text class="iconfont icon-daikeyuyue"></text>
						</text>
						<text class="text-xxl text-blue">
							<text>我是店长</text>
							<text class="cuIcon-right"></text>
						</text>
					</view>
				</view>
				<view class="flex justify-center align-center">
					<view @tap="toApp('wx8ba4c74f80e7b476')" class="flex justify-start align-baseline">
						<text style="font-size: 3rem;" class="text-blue">
							<text class="iconfont icon-jubaohuitubiao-"></text>
						</text>
						<text class="text-xxl text-blue">
							<text>我是顾客</text>
							<text class="cuIcon-right"></text>
						</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				showp: false,
				changeRoleFlg: false,
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			},
			currentLocation: function() {
				if (this.store.state.location) {
					if (this.store.state.location.city) {
						return this.store.state.location.city.criname;
					}
					
					if (this.store.state.location.provice) {
						return this.store.state.location.provice.criname;
					}
				}
				return undefined;
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
		},
		methods: {
			
			callKefu: function() {
				uni.makePhoneCall({
					phoneNumber: "4001033801"
				});
			},
			covertSp: function() {
				this.showp = !this.showp;
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			toLocation: function() {
				this.showp = false;
				uni.navigateTo({ 
					url: '/pages/positioncity?flg=1' ,
				});
				
			},
			locate: function() {
				this.showp = false;
				this.location.loadLocation().then(data => {
					this.findCity(data.latitude, data.longitude);
				});
			},
			findCity: function(wd,jd) {
				this.location.jwdToLocation(wd, jd).then(res => {
					if (res.ad_info.nation_code != 156) {
						this.message.error("当前定位不在中国");
						return;
					}
					
					try {
						let qcode = res.ad_info.adcode;
						let scode = this.location.localmap.cmap[qcode].scode;
						let pcode = this.location.localmap.cmap[scode].scode;
						
						
						
						const currentObj = this.location.localmap.cmap[scode];
						let curLocation = {};
						if (currentObj) {
							if (currentObj.scode === "000000") {
								curLocation.proviceid = currentObj.cricode;
								curLocation.provice = this.location.localmap.cmap[curLocation.proviceid];
							} else {
								curLocation.cityid = currentObj.cricode;
								curLocation.city = this.location.localmap.cmap[curLocation.cityid];
									
								curLocation.proviceid = curLocation.city.scode;
								curLocation.provice = this.location.localmap.cmap[curLocation.proviceid];
							}
									
							this.store.commit("setLocation", curLocation);
							
							this.store.commit("setPosition", {
								jd: jd,
								wd: wd
							});
						}
						
					} catch (err) {
						console.log(err);
						this.message.error("定位出现问题");
						return;
					}
					
				});
			},
			changeRole: function() {
				this.changeRoleFlg = true;
			},
			closeRole: function() {
				this.changeRoleFlg = false;
			},
			toApp: function(appid) {
				if (uni.canIUse("navigateToMiniProgram")) {
					uni.navigateToMiniProgram({
						appId: appid,
						envVersion: "trial",
						success: res => {
							console.log(res);
						},
						fail: err => {
							console.log(err);
						}
					});
				} else {
					uni.showModal({
						content: '你的微信版本过低，请更新至最新版本。',
						showCancel: false,
					});
				}
			},
			openKf: function() {
				
				wx.openCustomerServiceChat({
					extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc7ae0620f47af7118'},
					corpId: 'wwfc95d22f0134437d',
					success: function(res) {
						console.log(res);
					},
					fail: function(err) {
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style scoped>
	.con-us-container {
		z-index: 9999;
		font-size: 50rpx;
		position: relative;
		padding: 5px;
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
